<template>
  <el-row :gutter="20" style="margin-bottom: 20px">

    <el-col :span="6">
      <el-card shadow="hover" class="card">
        <template #header>
          <div class="info">
            <p>资产总数</p>
            <div>
              <el-icon style="color: #ffffff;">
                <Files/>
              </el-icon>
            </div>
          </div>
        </template>
        <el-statistic :value="assetsInfo.assetsTotal"/>
        <div class="info_footer">
          <p>共计</p>
          <el-link @click="router.replace('/assetsIndex')">
            <span>查看详情</span>
            <el-icon class="el-icon--right">
              <View/>
            </el-icon>
          </el-link>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card shadow="hover" class="card">
        <template #header>
          <div class="info">
            <p>资产损坏总数</p>
            <div>
              <el-icon style="color: #ffffff;">
                <Files/>
              </el-icon>
            </div>
          </div>
        </template>
        <el-statistic :value="assetsInfo.assetsFixTotal"/>
        <div class="info_footer">
          <p>共计</p>
          <el-link @click="router.replace('/assetsIndex')">
            <span>查看详情</span>
            <el-icon class="el-icon--right">
              <View/>
            </el-icon>
          </el-link>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card shadow="hover" class="card">
        <template #header>
          <div class="info">
            <p>资产类别总数</p>
            <div>
              <el-icon style="color: #ffffff;">
                <Files/>
              </el-icon>
            </div>
          </div>
        </template>
        <el-statistic :value="assetsInfo.typeTotal"/>
        <div class="info_footer">
          <p>共计</p>
          <el-link @click="router.replace('/assetsIndex')">
            <span>查看详情</span>
            <el-icon class="el-icon--right">
              <View/>
            </el-icon>
          </el-link>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card shadow="hover" class="card">
        <template #header>
          <div class="info">
            <p>资产借出数量</p>
            <div>
              <el-icon style="color: #ffffff;">
                <Files/>
              </el-icon>
            </div>
          </div>
        </template>
        <el-statistic :value="assetsInfo.assetsFixTotal"/>
        <div class="info_footer">
          <p>共计</p>
          <el-link @click="router.replace('/assetsIndex')">
            <span>查看详情</span>
            <el-icon class="el-icon--right">
              <View/>
            </el-icon>
          </el-link>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import request from "@/util/request";
import { ref } from "vue"
import { Files, View } from '@element-plus/icons-vue'
import router from '@/router'

const assetsInfo = ref([])

const initAssetsInfo = async () => {
  const res = await request.get("home/info");
  // console.log(res.data)
  assetsInfo.value = res.data;
}
initAssetsInfo();
</script>

<style lang="scss" scoped>
.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-weight: bold;
    }
  }

  .info_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
}
</style>